<template>
  <div class="content">
    <div class="header">
      <h3 class="title">用户列表</h3>
      <el-button type="primary" @click="handleNewUserClick">新建用户</el-button>
    </div>
    <div class="table">
      <el-table :data="usersList" border>
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="用户名" prop="name"></el-table-column>
        <el-table-column label="操作">
          <el-button size="small" type="primary" text>编辑</el-button>
          <el-button size="small" text> 删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        small="small"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useSystemStore from '@/store/main/system/system'
import { formatUTC } from '@/utils/format'
import { ref } from 'vue'

// 自定义事件
const emit = defineEmits(['newClick'])

// 1. 发起action，请求usersList列表数据
const systemStore = useSystemStore()
systemStore.postUsersListAction()

// 2. 获取usersList数据，进行展示，通过storeToRes进行绑定，实现响应式
// const { usersList } = storeToRefs(systemStore)
const usersList = [
  {
    id: 1,
    name: '打断点'
  }
]

// 3. 页面相关的逻辑
const currentPage = ref(1)
const pageSize = ref(10)
function handleSizeChange(val: number) {
  console.log(`${val} items per page`)
}
function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`)
}

// 新增用户
function handleNewUserClick() {
  emit('newClick')
}
</script>

<style scoped lang="less">
.content {
  margin-top: 20px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
  .title {
    font-size: 22px;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
